<template>
    <div class="count">
        <div class="login-count">
            <el-form class="login-form">
                <h3 class="title">登录</h3>
                <el-form-item prop="username">
                    <el-input  clearable> 
                        <template #prepend>
                            <el-icon><User /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input  clearable> 
                        <template #prepend>
                            <el-icon><Lock /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button style="width: 100%;" type="primary" @click="onSubmit">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script lang="ts" setup>

    import { useRoute } from 'vue-router';
    import { Lock } from '@element-plus/icons-vue';

    const route = useRoute();

    const onSubmit =()=>{
        localStorage.setItem("mushan-token","111");
        route.replace("/");
    }



</script>

<style scoped>

    .count{
        width: 100vw;
        height: 100vh;
    }

    .login-count{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    .login-form{
        border-radius: 15px;
        padding: 15px 35px 15px 35px;
        width: 250px;
        background: #ffffff;
        box-shadow: 0 0 25px #cac6c6;

    }

    .title{
        text-align: center;
    }

</style>
